<template>
  <div>
    <div class="search-bar">
      <div class="search-content">
        <input type="text" value="搜索您想要的商品" class="search-text">
        <button class="search">搜索</button>
      </div>
    </div>
    <div class="view-content category-content">
    <div class="menu-left" id="sidebar">
      <ul>
        <li class="active">酒水食品</li>
        <li>家用电器</li>
        <li>电脑办公</li>
        <li>家具家居</li>
        <li>服装服饰</li>
        <li>个化护装</li>
        <li>衣帽鞋包</li>
        <li>运动户外</li>
        <li>汽车用品</li>
        <li>母婴玩具</li>
        <li>医药保健</li>
        <li>图书音像</li>
        <li>旅游生活</li>
      </ul>
    </div>
    <section class="menu-right">
      <h5>酒水食品</h5>
      <ul>
        <li class="w-3" @click="to('goodsThis')">
           <img src="../assets/category/pro3.jpg"><span>酒水食品</span></li>
      </ul>
    </section>
    </div>
  </div>
</template>

<style scoped>
  @import "../css/style.css";
  .category-content{
  display: flex;
  }
  .menu-left {
    background: #F6F6F9;
    left: 0;
    width: 20.4%;
    overflow-y: scroll;
  }
  .menu-left ul {
    margin: 0;
    padding: 0;
  }
  .menu-left ul li {
    box-sizing: border-box;
    font-size: 0.75rem;
    color: #333;
    width: 4.75rem;
    height: 2.625rem;
    line-height: 2.625rem;
    text-align: center;
  }
  .menu-left ul li.active:before {
    content: " ";
    position: absolute;
    display: block;
    width: 0.125rem;
    height: 100%;
    background: #e21323;
    top: 0;
    left: 0;
  }
  .menu-left ul li.active {
    background: #fff;
    position: relative;
  }
  .menu-right {
    background: #fff;
    right: 0;
    width: 79.5%;
    overflow-y: scroll;
  }
  .menu-right h5 {
    font-size: 0.75rem;
    padding-top: 0.125rem;
    color: #666;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 0.16rem solid #f5f5f5;
    padding-bottom: 0.5rem;
  }
  .w-3 {
    width: 33.33%;
    float: left;
    padding: 0.8rem 0;
    position: relative;
    left: -1.38rem;
  }
  .w-3 img {
    width: 3.125rem;
    height: 3.125rem;
  }
  .w-3 span {
    display: block;
    height: 1.625rem;
    line-height: 1.625rem;
    text-align: center;
    font-size: 0.625rem;
    color: #888;
  }
</style>
<script>
export default {
  methods:{
    to(page){
      this.$router.push({  name:page })
    }
  }
}
</script>
